<template>
  <div class="box">
    <div class="box_nav">
      <h1>商品管理</h1>
      <p>
        <el-button type="primary" size="small" icon="el-icon-edit" class="button">添加商品</el-button>
      </p>
    </div>
    <!-- 输入 -->
    <div class="box_input">
      <el-select v-model="select" slot="prepend" placeholder="请选择" @change="onChange">
        <el-option
          v-for="(item) in selectList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>

      <el-input v-model="input" placeholder="请输入内容"></el-input>
      <el-button plain @click="addSearch">查询</el-button><br><br>
    </div>
    <!-- 表格 -->
    <el-table :data="tableData" border style="width: 100%" stripe>
      <el-table-column prop="orderNo" label="订单号" ></el-table-column>
    <el-table-column prop="receiverName" label="收件人" ></el-table-column>
      <el-table-column prop="statusDesc" label="订单状态"></el-table-column>
     <el-table-column  label="订单总价">
         <template slot-scope="scope">
          <p>￥:{{scope.row.payment}}</p>
        </template>
     </el-table-column>
      <el-table-column  label="创建时间" prop="createTime">
     </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Page @pageadd="pageadd" :total="total"></Page>
  </div>
</template>

<script>
import { HomeRight, ListSeach } from "../../request/http";
import { ListSeached , OrderList} from "../../request/http";
import Page from "../page/Page";
export default {
  data() {
    return {
      restaurants: [],
      state: "",
      input: "",
      select: "productId",
      tableData: [],
      stores: {
        pageNum: 1,
        pageSize: 10,
      },
      total:0,
      selectList: [
        {
          label: "按ID查询",
          value: "productId",
        },
        {
          label: "按名称查询商品",
          value: "productName",
        },
      ],
    };
  },
  methods: {
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    onChange(value) {
      // console.log(value);
      this.select = value;
    },
    // 查询
    addSearch() {
      // console.log(this.select);
      var obj = {};
      // this.tableData = []
      obj[this.select] = this.input;
      if (this.select == "productId") {
        ListSeach(obj).then(res=>{
          this.tableData = res.data.data.list;
        });
      } else if (this.select == "productName"){
        ListSeached(obj).then((resp) => {
          // window.console.log(resp.data.data.list);
          this.tableData = resp.data.data.list;
        });
      }else{
         HomeRight(this.stores).then((res) => {
      // console.log(res.data.data.list);

      this.tableData = res.data.data.list;
    });
      }

      // console.log(obj);
    },
    // 分页
    pageadd(page) {
      // console.log(page);
      this.stores.pageNum = page;
      // console.log(this.stores);
      OrderList(this.stores)
        .then((res) => {
          // console.log(res.data.data.list);
          this.tableData = res.data.data.list;
        })
        .catch((error) => {
          window.console.log(error);
        });
    },

    // 编辑
    handleClick(row) {
      console.log(row);
    },

    // formatSex(row, column, cellValue) {
    //  console.log(cellValue);
    //   if (cellValue == 1) {
    //     return "在售";
    //   } else if (cellValue == 2) {
    //     return "已下架";
    //   }
    // },
  },
  components: {
    Page,
  },
  filters: {
    changestatus(value) {
      // console.log(value);
      if (value == 1) {
        return "在售";
      } else {
        return "已下架";
      }
    },
    change(value) {
      // console.log(value);
      if (value == 1) {
        return "下架";
      } else {
        return "上架";
      }
    },
  },
  mounted() {
    // this.restaurants = this.loadAll();
    OrderList(this.stores).then((res) => {
    //   console.log(res.data.data);
        this.total= res.data.data.total
      this.tableData = res.data.data.list;
    });
  },
};
</script>

<style lang="scss" scoped>
@import "@/Scss/index.scss";
.box {
  padding: 20px;
}
.button {
  // width: 100%;
  @include bgColor(#398dd6);
  @include FontOnly(16px);
}
.button:hover {
  @include bgColor(#2e6da4);
}
.box_nav {
  width: 100%;
  height: 80px;
  // display: flex;
}
.box_nav > h1 {
  font-size: 30px;
  font-weight: 400;
}
.box_nav > p {
  margin-left: 1000px;
  // float: right;
}
.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;

    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .addr {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .addr {
      color: #ddd;
    }
  }
}
.box_input {
  display: flex;
  width: 40%;
  justify-content: space-between;
}
.scopeItem {
  background: orange;
  color: white;
  padding: 3px;
  margin-left: 5px;
  border-radius: 5px;
  font-size: 14px;
}
</style>